<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="never">
    <meta name="renderer" content="webkit">
    <meta
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
            name="viewport">
    <title>弹幕姬-直播房间连接</title>
    <link rel="apple-touch-icon-precomposed"
          href="../../img/headlogo.png" th:href="@{/img/favicon.png}">
    <link rel="shortcut icon" href="../../img/headlogo.png"
          th:href="@{/img/favicon.png}">
    <link rel="stylesheet" href="../../css/style.css"
          th:href="@{/css/style.css}" type="text/css" media="all">
    <link rel="stylesheet" href="../../css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}" type="text/css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.7.0.min.js"
            th:src="@{/js/jquery-3.7.0.min.js}"></script>
    <script type="text/javascript" src="../../js/popper.min.js"
            th:src="@{/js/popper.min.js}"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"
            th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="../../js/style.js"
            th:src="@{/js/style.js}"></script>
</head>

<body>
<div class="app">
    <div
            class="row align-items-center justify-content-center center-wrapper">
        <div class="col-md-6 m-3">
            <div class="card border-second">
                <div class="card-header">
                    <h2>
                        <span>弹幕姬连接</span>
                        <iframe
                                src="https://ghbtns.com/github-btn.html?user=BanqiJane&amp;repo=Bilibili_Danmuji&amp;type=star&amp;count=true&amp;size=large"
                                frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                    </h2>
                </div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <div class="input-group-append">
                            <span class="input-group-text">房间号</span>
                        </div>
                        <input type="number" id="room_id" class="form-control"
                               placeholder="需要连接的房间号" min="1"
                               οninput="if(value.length>5)value=value.slice(0,5)"
                               style="ime-mode: Disabled"
                               onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                               th:value="${ROOMID}!=null?${ROOMID}:1">
                    </div>
                </div>
                <div class="card-footer">
                    <button type="button" class="btn btn-primary" id="connect">连接</button>
                    <button type="button" class="btn btn-danger disabled"
                            id="disconnect">断开连接
                    </button>
                    <a th:href="@{/}" class="btn btn-link" style="float: right;">返回</a>
                    <span class="notice-message"></span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
